<!--
    Airhang
    使用参数说明：
    @taskList： 任务列表形式的 外部所传变量
    @showObj：装扮列表 外部所传变量
    @addObj: 开通vip的装扮  外部所传变量
    @type： 列表展示类型 外部所传变量
    @title: 弹窗 标题 外部所传变量

    外部调用的方法（需先自定义ref）：
    @show(): 外部通过调用此方法 显示隐藏 弹出层
    @toggleSty(): 外部传 :type 属性值 去使用不同的弹出层 内容格式  [string:"列表",string:"选项栏" ]
-->
<template>
  <van-popup
    duration="0.2"
    position="bottom"
    closeable
    close-icon="close"
    round
    style="width: 100%; height: 400px; overflow-y: scroll"
    v-model:show="popShow"
  >
    <div v-show="toggleSty(type) === 0 ? true : false" class="innerBox">
      <h5>{{ title }}</h5>
      <ul>
        <li v-for="(e, i) in taskList" :key="i">
          <img class="iconSty" :src="e.icon" alt="" />
          <div class="midSty">
            <p>今日打卡0/6个习惯</p>
            <div class="midInnerSty">
              <img
                style="width: 9px; height: 9px; object-fit: cover"
                src="../assets/img/竹子.png"
                alt=""
              />
              <p>X10个竹子</p>
            </div>
          </div>
          <p class="goAdd">去完成</p>
        </li>
      </ul>
    </div>
    <div v-show="toggleSty(type) === 1 ? true : false">
      <h5 style="margin-top: 16px">{{ title }}</h5>
      <van-tabs
        animated
        duration="0.3"
        swipeable
        color="#0090FF"
        style="margin-top: 6px"
        :active="active"
      >
        <van-tab title="未拥有">
          <div class="showBox">
            <div v-show="toggleVip(showObj)" v-for="(e, i) in showObj" :key="i">
              <img class="showIcon" :src="e.icon" alt="" />
              <p style="font-size: 13px">{{ e.tips }}</p>
            </div>
            <div v-show="!toggleVip(showObj)" class="defaultSty">
              <p class="defaultInt">更多装扮，敬请期待</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="已拥有">
          <div class="showBox">
            <div v-show="toggleVip(addObj)" v-for="(e, i) in addObj" :key="i">
              <img
                @click="addShow(e, i)"
                class="showIcon"
                :src="e.icon"
                alt=""
              />
              <p style="font-size: 13px">{{ e.tips }}</p>
              <p :class="toggleIconTips(e.isActive)">
                {{ e.isActive ? "已装扮" : "未装扮" }}
              </p>
            </div>
            <div v-show="!toggleVip(addObj)" class="defaultSty">
              <p class="defaultInt">开通Vip，来装扮你的庄园吧~</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "popDialog",
  props: ["taskList", "type", "showObj", "addObj", "title"],
  data() {
    return {
      popShow: false,
      closeAble: true,
      active: 1,
    };
  },
  watch: {
    addObj: {
      handler(newValue, oldValue) {
        localStorage.setItem("pandaDecration", JSON.stringify(this.addObj));
        this.$store.commit("commitSave");
      },
      deep: true,
    },
  },
  created() {
    // console.log(JSON.parse(localStorage.getItem("decorationArr")))
  },
  methods: {
    show() {
      this.popShow = true;
    },
    toggleSty(type) {
      switch (type) {
        case "列表":
          {
            return 0;
          }
          break;
        case "选项栏": {
          return 1;
        }
      }
    },
    //使用vuex方法
    useStoreWay() {
      this.$store.commit("toggleNightDay");
    },
    //是否vip
    toggleVip(arr) {
      return arr.length ? true : false;
    },
    toggleIconTips(flag) {
      switch (flag) {
        case true:
          {
            return "activeSty";
          }
          break;
        case false:
          {
            return "noSty";
          }
          break;
      }
    },
    addShow(e, i) {
      e.isActive = !e.isActive;
      e.isActive ? e.focus(this) : e.before(this);
    },
  },
};
</script>

<style scoped>
.tipLogo {
  width: 30px;
  height: 900px;
  background: linear-gradient(to bottom, #42b983, #fff);
}
.innerBox {
  width: 100%;
  height: 100%;
  /*background-color: #d8d8d8;*/
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.innerBox h5 {
  height: 60px;
  line-height: 60px;
  box-shadow: 0 0 1px #d8d8d8;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
}
.innerBox ul {
  width: 100%;
  height: 340px;
  list-style: none;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.innerBox ul li {
  width: 90%;
  height: 70px;
  background-color: #42b983;
  border-radius: 9px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.innerBox ul li:nth-child(1) {
  background-color: #43c4ff;
}
.innerBox ul li:nth-child(2) {
  background-color: #f5c623;
}
.innerBox ul li:nth-child(3) {
  background-color: #ffa921;
}
.innerBox ul li:nth-child(4) {
  background-color: #e578ff;
}
.iconSty {
  width: 45px;
  height: 45px;
  object-fit: cover;
}
.midSty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.midSty p {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}
.midInnerSty {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.midInnerSty p {
  font-size: 11px;
  font-weight: 400;
}
.goAdd {
  font-size: 11px;
  width: 65px;
  height: 25px;
  background-color: #ffffff;
  line-height: 25px;
  text-align: center;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}
.goAdd:active {
  transform: scale(1.1);
}
.showBox {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 15px;
}
.showBox div {
  width: 33%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.showIcon {
  width: 75px;
  height: 75px;
  object-fit: cover;
}
.activeSty {
  font-size: 9px;
  background-color: #f5c623;
  color: orange;
  width: 45px;
  border-radius: 9px;
}
.noSty {
  font-size: 9px;
  background-color: transparent;
  color: #d8d8d8;
  width: 45px;
  border-radius: 9px;
}
.active {
  border-radius: 50%;
  border: 2px solid #ff7e00;
}
.noActive {
  border: none;
}
.showBox .defaultSty {
  width: 100%;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.showBox .defaultSty .defaultInt {
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Segoe UI, Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB",
    "Microsoft Yahei", sans-serif;
}
</style>
